<template>
    <div class="wrap searchPage">
        <div class="searchBoxWrap hide">
            <form class="searchBox" action="" @submit.prevent="search">
                <input type="text" placeholder="搜索或输入网址地址" v-model="keyword">
                <i class="icon icon-search" @click="search"></i>
            </form>
        </div>
        <!-- <div style="width:100%;height:1.666667rem"></div> -->
        <!-- <lodeMore :loadBottom="loadMore" :allLoaded="allLoaded" ref="loadmore">
            <div class="list">
                <searchItem v-for="(item, index) in list" :data="item" :key="index"></searchItem>
            </div>
        </lodeMore> -->
        <!-- <div class="list" v-if="list.length > 0">
            <searchItem v-for="(item, index) in list" :data="item" :keyword="oldword" :key="index"></searchItem>
        </div> -->
        <div class="list">
            <div v-for="(item, index) in list" :key="index">
                <searchItem :data="item" :keyword="oldword" v-if='item.hasOwnProperty("title")'></searchItem>
                <div class="list" v-html='item' v-else></div>
            </div>
        </div>
        <div class="list" v-if="!loading && list.length == 0">
            <div class="empty">
                抱歉，没有找到与“<span class="highlight">{{keyword}}</span>”相关的结果。
                <div class="tip">
                    <h4>建议您：</h4>
                    <li>请检查输入文字是否有误；</li>
                    <li>请尝试其他查询词；</li>
                    <li>请改用较常见的文字。</li>
                </div>
            </div>
        </div>
        <a href="javascript:;" class="nextPage" @click="loadMore" v-if="list.length > 0">
            <label>下一页</label>
            <i class="icon active" v-if="loading">
                <svg t="1581667510969" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="4207" width="1024" height="1024">
                    <path
                        d="M802.094516 177.583534c-15.876596-13.33982-39.616276-11.282974-52.993958 4.629437l-72.544223 86.47142c-13.376659 15.950274-11.317767 39.689954 4.630461 53.029774 15.913435 13.340843 39.615253 11.282974 52.991911-4.630461l72.582085-86.47142C820.101635 214.664058 818.043766 190.923354 802.094516 177.583534zM956.589193 445.084984c-3.638877-20.470217-23.152303-34.103726-43.621497-30.502711l-111.168915 19.587104c-20.469194 3.602038-34.138518 23.115464-30.537504 43.62252 3.638877 20.432355 23.116487 34.103726 43.621497 30.500665l111.131053-19.623943C946.520883 485.068627 960.19123 465.554178 956.589193 445.084984zM889.154337 697.884594l-97.791234-56.447617c-18.008142-10.400884-41.012066-4.226255-51.375088 13.781888-10.401908 18.008142-4.264117 41.012066 13.744026 51.41295l97.791234 56.447617c17.971303 10.398838 41.013089 4.226255 51.411927-13.781888C913.298224 731.290425 907.125641 708.286502 889.154337 697.884594zM650.171408 793.545304c-7.130398-19.550265-28.701692-29.621645-48.215118-22.491247-19.551288 7.091512-29.619598 28.701692-22.491247 48.215118l38.58683 106.09741c7.129374 19.513426 28.736485 29.581736 48.216141 22.490224 19.550265-7.092535 29.620621-28.703739 22.527063-48.251957L650.171408 793.545304zM421.734672 771.054057c-19.513426-7.131421-41.085744 2.939959-48.215118 22.491247l-38.623669 106.059548c-7.092535 19.549242 2.977821 41.160445 22.528086 48.251957 19.476587 7.092535 41.086767-2.975774 48.215118-22.490224l38.58683-106.09741C451.356316 799.75575 441.284937 778.145569 421.734672 771.054057zM232.327858 641.436978l-97.79021 56.447617c-17.971303 10.400884-24.14491 33.405831-13.781888 51.41295 10.399861 18.008142 33.441647 24.180725 51.41295 13.781888l97.79021-56.447617c18.008142-10.400884 24.14491-33.405831 13.745049-51.41295C273.339924 637.210723 250.334977 631.036094 232.327858 641.436978zM252.429685 477.791897c3.601015-20.507056-10.070356-40.020482-30.53955-43.62252l-111.166869-19.587104c-20.470217-3.602038-39.983643 10.031471-43.621497 30.502711-3.602038 20.470217 10.06831 39.984666 30.575366 43.584658l111.131053 19.623943C229.313198 511.895623 248.790808 498.224252 252.429685 477.791897zM347.133603 268.685415l-72.5432-86.47142c-13.377682-15.913435-37.117362-17.97028-52.993958-4.629437-15.948227 13.33982-18.008142 37.0795-4.666276 53.029774l72.579015 86.47142c13.377682 15.913435 37.081547 17.971303 52.993958 4.630461C358.452393 308.375369 360.510262 284.635689 347.133603 268.685415zM511.844969 71.928193c-20.799722 0-37.631062 16.830317-37.631062 37.631062l0 112.895233c0 20.800745 16.83134 37.632085 37.631062 37.632085s37.631062-16.83134 37.631062-37.632085L549.476031 109.560278C549.477055 88.759533 532.645714 71.928193 511.844969 71.928193z"
                        p-id="4208"></path>
                </svg>
            </i>
            <i class="icon" v-else>
                <svg t="1581667366956" class="icon" viewBox="0 0 1024  1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="3419" width="1024" height="1024">
                    <path
                        d="M910.336 297.984c-14.336-14.336-37.888-13.312-53.248 1.024L512 644.096 165.888 297.984c-15.36-15.36-38.912-15.36-53.248-1.024-14.336 14.336-14.336 38.912 1.024 53.248l362.496 362.496c4.096 4.096 9.216 7.168 14.336 9.216 14.336 12.288 36.864 11.264 51.2-3.072l367.616-367.616c15.36-15.36 15.36-38.912 1.024-53.248z"
                        p-id="3420"></path>
                </svg>
            </i>

        </a>

    </div>
</template>

<script>
    import searchItem from '@/compoents/searchItem'
    import lodeMore from '@/compoents/loadmore'
    import {
        Toast,
    } from 'vant';
    Vue.use(Toast);
    import axios from 'axios'
    export default {
        name: 'complain',
        data() {
            return {
                page: 1,
                loading: false,
                keyword: '',
                oldword: '',
                list: [],
                show: true,
                scrollY: 0
            }
        },
        mounted() {
            let query = this.$route.query
            if (query.hasOwnProperty('keyword')) {
                this.keyword = query.keyword
            }
            window.addEventListener('scroll', this.handleScroll, true)
            this.search()
        },
        methods: {
            loadTop() {
                return false
            },
            handleScroll(e) {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop ||
                    document.body.scrollTop
                var scroll = scrollTop - this.scrollY;
                this.scrollY = scrollTop;
                if (scroll < 0) {
                    this.show = true
                } else {
                    this.show = false
                }
                // console.log(this.show)
            },
            search() {
                Toast.loading({
                    message: '加载中...',
                    type: 'loading',
                    forbidClick: true,
                    duration: 0,
                });

                this.loading = true
                let page = this.page
                let list = this.list
                let oldword = this.oldword
                let keyword = this.keyword
                if (oldword != keyword) {
                    list = []
                    page = 1
                }
                var arr = ''

                // 获取创意的接口
                axios.get('https://e.aebrowser.cn/index.php/ad/getAppAd', {
                    params: {
                        keyword,
                        page
                    }
                }).then(r => {
                    if (r.data != '') {
                        arr = r.data
                    }
                    this.$store.dispatch("search", {
                        keyword: keyword,
                        page: page
                    }).then(res => {
                        let {
                            ads,
                            news
                        } = res.data
                        Toast.clear()
                        if (news.length != 0) {
                            news.unshift(arr)
                        }
                        list = list.concat(news)
                        this.oldword = keyword
                        this.list = list
                        this.page = page + 1
                        this.loading = false

                        // this.$refs.loadmore.onBottomLoaded();
                    }).catch(e => {
                        console.log("Err", e)
                        this.loading = false
                        // this.$refs.loadmore.onBottomLoaded();
                    })
                })
                // END
            },
            keyup(e) {
                // console.log(e)
                if (e.keyCode == 13) {
                    this.search()
                }
            },
            loadMore() {
                console.log("加载更多")
                this.search()
            }
        },
        computed: {

        },
        components: {
            lodeMore,
            searchItem
        }
    }
</script>

<style lang="scss" scoped>
    .wrap {
        font-size: 32px;
        background: #F6F6F6;
        width: 100%;
        overflow-x: hidden;
    }

    .searchPage {
        width: 750px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        font-size: 32px;

        * {
            box-sizing: border-box;
        }

        .hide {
            top: -125px !important;
        }

        .searchBoxWrap {
            width: 100%;
            background: #FFF;
            height: 125px;
            position: fixed;
            z-index: 9;
            top: 0;
            transition: top 0.5s;

            .searchBox {
                width: 680px;
                margin: 0 auto;
                height: 82px;
                margin-top: 22px;
                border: 2px solid #000000;
                border-radius: 6px;
                padding: 15px 30px 20px 26px;
                display: flex;

                // background: #F0f;
                input {
                    border: none;
                    width: 600px;
                    height: 46px;
                    outline: none;
                    background: transparent;
                    font-size: 28px;
                    line-height: 46px;
                    // background: #F00;
                }

                .icon-search {
                    height: 60px;
                    width: 60px;
                    background: url("/images/fangdajing.png");
                    background-size: 50px 50px;
                    background-repeat: no-repeat;
                }
            }
        }

        .list {
            width: 100%;

            // height: calc(100vh - 125px);
            // overflow-y: scroll;
            .empty {
                width: 100%;
                background: #fff;
                padding: 26px 35px 40px;
                margin: 30px auto;
                display: block;
                line-height: 2;
                text-decoration: unset;

                .tip {
                    color: #666;

                    h4 {
                        font-weight: normal;
                        margin-bottom: 0;
                    }
                }
            }
        }

        .nextPage {
            width: 100%;
            height: 80px;
            background: #FFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: #000;
            margin-bottom: 30px;
            text-decoration: unset;

            * {
                font-style: normal;
                text-decoration: unset;
            }

            .icon {
                margin-left: 10px;
                height: 20px;
                width: 36px;
                display: flex;
                align-items: center;

                // background-image: url()
                svg {
                    height: 100%;
                    width: 100%;
                }

                &.active {
                    height: 36px;
                    width: 36px;

                    svg {
                        animation: roll 1s linear infinite;
                    }
                }
            }
        }
    }

    @keyframes roll {
        0% {
            transform: rotate(0deg)
        }

        50% {
            transform: rotate(180deg)
        }

        100% {
            transform: rotate(360deg)
        }
    }
</style>